<!DOCTYPE html>
{% load static %}
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>Diot</title>
    <link rel="shortcut icon" href="#" />

    <!-- 引入样式 -->
       <link rel="stylesheet" href="{% static 'main/index.css' %}" type="text/css"/>
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->

    <link rel="stylesheet" href="{% static 'main/style.css' %}" type="text/css" />
</head>

<body>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <!-- <script src="{% static 'main/vue.js' %}"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="{% static 'main/index.js' %}"></script>
    <!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
    <div id="app">
        <el-container>
            <el-header>
                <div class="line"></div>
                <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                    background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <el-menu-item index="1">首页</el-menu-item>
                    <!-- <el-submenu index="2">
                        <template slot="title">我的工作台</template>
                        <el-menu-item index="2-1">选项1</el-menu-item>
                        <el-menu-item index="2-2">选项2</el-menu-item>
                        <el-menu-item index="2-3">选项3</el-menu-item>
                        <el-submenu index="2-4">
                            <template slot="title">选项4</template>
                            <el-menu-item index="2-4-1">选项1</el-menu-item>
                            <el-menu-item index="2-4-2">选项2</el-menu-item>
                            <el-menu-item index="2-4-3">选项3</el-menu-item>
                        </el-submenu>
                    </el-submenu> -->
                    <el-menu-item index="2">消息中心</el-menu-item>
                </el-menu>
            </el-header>


            <el-main>
                
                <div id="data_table" class="main_flex"></div>

                <div id="checkbox" class="main_flex">
                    <el-checkbox :indeterminate="isIndeterminate" v-bind:style="styleObject" v-model="checkAll"
                        @change="handleCheckAllChange">全选</el-checkbox>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group v-model="checked" @change="handleCheckedChange">
                        <el-checkbox v-for="opt in options" :label="opt" :key="opt" v-bind:style="styleObject" :id="opt">
                            {{opt}}
                        </el-checkbox>
                    </el-checkbox-group>
                </div>

                <div id=drawer class="main_flex">
                    <el-drawer
                        title="拟合"
                        :size="size"
                        :modal="modal"
                        :visible.sync="drawer"
                        :direction="direction"
                        :before-close="handleClose">
                        <div class="block">
                            <el-image :src="src">
                              <div slot="placeholder" class="image-slot">
                                加载中<span class="dot">...</span>
                              </div>
                            </el-image>
                          </div>
                    </el-drawer>
                </div>

                <template class="main_flex">
                    <el-table
                      :data="tableData"
                      :row-class-name="tableRowClassName"
                      height="685"
                      border
                      style="width: 100%">
                      <el-table-column
                        prop="datetime"
                        label="时间"
                        width="180">
                      </el-table-column>
                      <el-table-column
                        prop="percentage"
                        label="天然气含量"
                        width="180">
                      </el-table-column>
                      <el-table-column
                        prop="temperature"
                        label="气温">
                      </el-table-column>
                      <el-table-column
                        prop="humidity"
                        label="空气湿度">
                      </el-table-column>
                    </el-table>
                  </template>

            </el-main>


            <el-footer>
                <a href="http://www.beian.miit.gov.cn/" target="_blank">陕ICP备18011683号-1</a>
            </el-footer>
        </el-container>
    </div>
    <script src="{% static 'main/main.js' %}" type="module"></script>
    <script src="{% static 'main/d3.js' %}"></script>
<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.1/d3.min.js"></script>-->
    <script src="{% static 'main/dsdata.js' %}" type="module"></script>
</body>

</html>
